<template>
  <div>
    <el-dialog
      title="修改会员备注"
      v-model="state.isShow"
      lock-scroll
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      draggable
      align-center
      width="400px"
      @closed="closed"
    >
      <ul>
        <li class="flex items-center bg-[#e5f1f5] border rounded-[6px]">
          <div class="w-[100px] pl-2">会员账号</div>
          <div class="flex-1 w-0 h-[30px] leading-[30px]">
            {{ data?.Name }}
          </div>
        </li>
        <li class="flex items-center bg-[#e5f1f5] border rounded-[6px] mt-[10px]">
          <div class="w-[100px] pl-2">会员昵称</div>
          <div class="flex-1 w-0h-[30px] leading-[30px]">
            {{ data?.NickName || "--" }}
          </div>
        </li>
        <li class="flex items-center bg-[#e5f1f5] border rounded-[6px] mt-[10px]">
          <div class="w-[100px] pl-2">会员备注</div>
          <div class="flex-1 w-0">
            <el-input v-model="form.note" placeholder="请输入会员备注"></el-input>
          </div>
        </li>
      </ul>
      <template #footer>
        <el-button @click="closed">取 消</el-button>
        <el-button
          :disabled="state.updating"
          :loading="state.updating"
          type="primary"
          @click="confirm"
          >确 定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { message } from "@/utils/message";
import { debounce } from "lodash-es";
import { reqUserNoteEdit } from "@/api/user";

const emit = defineEmits(["update"]);
const data = ref<ChatContentMo | null>(null);
const state = reactive({
  isShow: false,
  updating: false
});
const form = reactive({
  note: ""
});
const closed = () => {
  form.note = "";
  state.isShow = false;
};
const open = (item: ChatContentMo) => {
  data.value = item;
  state.isShow = true;
};

const confirm = debounce(
  async () => {
    if (!data.value) {
      message.warning("非法操作");
      return false;
    }
    if (!form.note) {
      message.warning("请输入会员备注");
      return false;
    }
    state.updating = true;
    try {
      await reqUserNoteEdit({
        UserId: Number(data.value?.UserId),
        Note: form.note
      });
      state.updating = false;
      emit("update");
      message.success("修改备注成功");
      setTimeout(() => {
        closed();
      }, 200);
    } catch (error) {
      state.updating = false;
      console.log(error);
    }
  },
  500,
  { leading: true, trailing: false }
);

defineExpose({
  open
});
</script>
<style scoped lang="scss">
:deep(.el-dialog__body) {
  padding: 20px;
}
</style>
